<template>
	<button @click="flag = true">显示猫</button>
	<button @click="flag = false">显示狗</button>
	<br/>
	<!-- v-if指令是通过元素的增减实现的 -->
	<!-- 图片相对路径 -->
	<!-- 同级别访问必须以./开头 -->
	<!-- <img id="cat" src="./assets/img/cat.jpg" v-if="flag"/> -->
	<!-- 图片绝对路径，以项目根目录开始 -->
	<!-- <img id="dog" src="/src/assets/img/dog.jpg" v-else/> -->
	
	<!-- v-show是通过修改元素的display样式属性来实现的 -->
	<!-- @代表src目录 -->
	<img id="cat" src="@/assets/img/cat.jpg" v-show="flag"/>
	<img id="dog" src="@/assets/img/dog.jpg" v-show="!flag"/>
</template>

<script setup>
import { ref } from 'vue'
const flag = ref(true)
</script>

<style scoped>
	
</style>